import React, { useState, useEffect } from 'react';
import { Icon, Tooltip } from 'antd';
import './index.less';
import $ from 'jquery';
import PropTypes from 'prop-types';
import {DownOutlined, UpOutlined} from "@ant-design/icons";

function Panel(props) {
    const {
        id, title, children, titleIcon, subTitle, titleInfo, titleStyle, subPanel, style
    } = props;

    let panelBody;

    const [collapsed, setCollapsed] = useState(false);

    useEffect(() => {
        setCollapsed(props.defaultCollapsed);
    }, []);

    const toggle = () => {
        setCollapsed(!collapsed);
        $(panelBody).toggle(collapsed);
    };

    const titleElement = title ? (
        <div className={'panel-title'} style={titleStyle || {}}>
            {titleIcon}
            <h1>{title}</h1>
            {titleInfo && (
                <Tooltip title={titleInfo}>
                    <span style={{ marginLeft: '5px' }}>
                        <Icon type={'question-circle-o'} className={'text-primary'} />
                    </span>
                </Tooltip>
            )}
            {props.collapsible !== false && (
                <span className={'collapse'}>
                    <a onClick={toggle}>
                        {collapsed ? <UpOutlined /> : <DownOutlined />}
                    </a>
                </span>
            )}
            {(subTitle && !collapsed) && (
                <span className={'sub-title'}>
                    {subTitle}
                </span>
            )}
        </div>
    ) : null;

    return (
        <div id={id} className={'phoenix-panel' + (subPanel ? ' sub-panel' : '')} style={style}>
            {titleElement}
            <div ref={ref => panelBody = ref} className={'panel-body'}>
                {children}
            </div>
        </div>
    );
}
Panel.propTypes = {
    id: PropTypes.string,
    title: PropTypes.any,
    titleIcon: PropTypes.string,
    subTitle: PropTypes.any,
    titleInfo: PropTypes.any,
    titleStyle: PropTypes.object,
    subPanel: PropTypes.bool,
    style: PropTypes.object
};
export default Panel;
